﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ICBF</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <!-- jQueryMobileCSS - original without styling -->
    <link rel="stylesheet" href="css/jquerymobile.css" />
    <!-- nativeDroid core CSS -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
    <!-- nativeDroid: Light/Dark -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
    <!-- nativeDroid: Color Schemes -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.purple.css" id='jQMnDColor' />
    <style type="text/css">
        .parra_texto
        {
            font-weight: 300;
            margin: 7px 0;
            white-space: normal;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 59px;
            width: 100%;
        }
        .listdo_iconos
        {
            padding-bottom: 0px;
            border: 0 !important;
            width: 200px;
        }
        
        .imagen_icono
        {
            /*float:left !important;        */
        }
        
        .ui-btn-inner
        {
            white-space: normal !important;
        }
        
        .ui-body-b .ui-collapsible-heading-toggle
        {
            border-bottom-width: 0px !important;
        }
        
        .ui-collapsible-heading-toggle .ui-btn-text
        {
            font-size: 16px !important;
        }
        
        #map-canvas
        {
            position: absolute;
            height: 75%;
            width: 100%;
            background-color: White;
        }
        
        .styled-select
        {
            width: 90%;
            height: 34px;
            overflow: hidden;
            background: url(imagenes/flecha_abajo.png) no-repeat right #ddd;
            padding: 3px;
            margin: 5px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            color: #888;
            border: none;
            outline: none;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }
    </style>
    <!-- jQuery / jQueryMobile Scripts -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/funciones.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        $(document).ready(function () {
            $('.ui-icon.ui-icon-arrow-d.ui-icon-shadow').hide();
        });

        var global = 0;
        var map;
        var markers = [];
        //Crea la ventana de información y limpia la propiedad content
        var infowindow = new google.maps.InfoWindow({
            content: ""
        })

        function initialize() {
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(5.067711, -75.518024),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            verDatos();
        }

        google.maps.event.addDomListener(window, 'load', crearMapa);

        function verDatos(Departamento, periodo) {
            var url = "http://servicedatosabiertoscolombia.cloudapp.net/v1/ICBF/distrbienestarina2013?$filter=regional='" + Departamento + "'&$format=json";
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    $.each(data, function (i, field) {
                        var cant = field.length;
                        $.each(field, function (x, item) {
                            if (field[x].periodo == (periodo + "-13")) {
                                PosicionGoogle(field[x].regional, field[x].municipio_punto, field[x].punto_de_entrega, field[x].direccion, field[x].telefono, field[x].total_kilos);
                            }
                        });
                    });
                },
                error: function (x, y, z) {

                }
            });
        }

        function crearMapa() {
            markers = [];
            var Depto = document.getElementById('departamentos_combo').value;
            var periodo = document.getElementById("periodos_combo").value;
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=Colombia,' + Depto + '&sensor=true', function (data) {
                var mapOptions = {
                    zoom: 6,
                    center: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
                verDatos(Depto, periodo);
            });
        }

        function PosicionGoogle(regional, ciudad, punto, direccion, telefono, kilos) {
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=Colombia,' + regional + ',' + ciudad + '&sensor=true', function (data) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
                    map: map
                });
                marker.Message = "<strong>Punto de entrega</strong>: " + punto + "<br />";
                marker.Message += "<strong>Ciudad/Corregimiento</strong>: " + ciudad + "<br />";
                marker.Message += "<strong>Dirección</strong>: " + direccion + "<br />";
                marker.Message += "<strong>Teléfono</strong>: " + telefono + "<br />";
                marker.Message += "<strong>Total de kilos</strong>: " + kilos + "<br />";
                marker.Message += "<input type='button' onclick='EnviarDenuncia(\"" + punto + "\")' Value='Enviar denuncia o comentario' />";
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(this.Message)
                    infowindow.open(map, this);
                });
                markers.push(marker);
            });
        }

        //Eliminar todos los markers del vector para limpiar el mapa
        function borrarMarkers() {

            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(5.067711, -75.518024),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        }

        function EnviarDenuncia(punto) {
            window.location.href = "mailto:atencionalciudadano@icbf.gov.co?subject=Denuncia/Comentario Punto de distribución&body=Punto de distribución: " + punto + " Comentario:";
        }


    </script>
</head>
<body>
    <div data-role="page" data-theme='b'>
        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
            <a href="index.html" data-ajax="false"><i class='icon-ellipsis-vertical'></i></a>
            <h1>
                ICBF</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-divider-theme="b" data-icon="false" data-filter="false"
                data-filter-theme="b" class='showastabs'>
                <li data-role="list-divider">Puntos de Distribuci&oacute;n de Bienestarina</li>
            </ul>
            <div class='message info'>
                <i class='icon-info-sign'></i>
                <p>
                    En esta secci&oacute;n podr&aacute; consultar el listado de puntos de distribución
                    de bienestarina.
                </p>
            </div>
            <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                el departamento a consultar:</span> </strong>
            <select id="departamentos_combo" class="styled-select" onchange="crearMapa()">
                <option value="Amazonas">Amazonas</option>
                <option value="Antioquia">Antioquia</option>
                <option value="Arauca">Arauca</option>
                <option value="Atlantico">Atlántico</option>
                <option value="Bolivar">Bolívar</option>
                <option value="Boyacá">Boyacá</option>
                <option value="Caldas">Caldas</option>
                <option value="Caqueta">Caquetá</option>
                <option value="Casanare">Casanare</option>
                <option value="Cauca">Cauca</option>
                <option value="Cesar">Cesar</option>
                <option value="Choco">Chocó</option>
                <option value="Cordoba">Córdoba</option>
                <option value="Cundinamarca">Cundinamarca</option>
                <option value="Guainia">Guainía</option>
                <option value="Guaviare">Guaviare</option>
                <option value="Huila">Huila</option>
                <option value="La Guajira">La Guajira</option>
                <option value="Magdalena">Magdalena</option>
                <option value="Meta">Meta</option>
                <option value="Nariño">Nariño</option>
                <option value="Norte de Santander">Norte de Santander</option>
                <option value="Putumayo">Putumayo</option>
                <option value="Quindio">Quindío</option>
                <option value="Risaralda">Risaralda</option>
                <option value="San Andres">San Andrés y Providencia</option>
                <option value="Santander">Santander</option>
                <option value="Sucre">Sucre</option>
                <option value="Tolima">Tolima</option>
                <option value="Valle">Valle del Cauca</option>
                <option value="Vaupes">Vaupés</option>
                <option value="Vichada">Vichada</option>
            </select>
            <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                el periodo:</span> </strong>
            <select id="periodos_combo" class="styled-select" onchange="crearMapa()">
                <option value="ene">Enero</option>
                <option value="feb">Febrero</option>
                <option value="mar">Marzo</option>
                <option value="abr">Abril</option>
                <option value="may">Mayo</option>
                <option value="jun">Junio</option>
                <option value="jul">Julio</option>
                <option value="ago">Agosto</option>
                <option value="sep">Septiembre</option>
                <option value="oct">Octubre</option>
                <option value="nov">Noviembre</option>
                <option value="dic">Diciembre</option>
            </select>
            <div id="map-canvas">
            </div>
        </div>
        <div data-position="fixed" data-tap-toggle="false" data-role="footer" data-tap-toggle="false" data-theme='b'>
            <div data-role="navbar">
                <ul>
                    <li><a href="https://www.facebook.com/gobiernoenlinea" target="_blank" data-icon="facebook"></a></li>
                    <li><a href="https://twitter.com/Gobiernoenlinea" target="_blank" data-icon="twitter"></a></li>
                    <li><a href="http://www.youtube.com/user/Vivegobiernoenlinea" target="_blank" data-icon="youtube"></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
